<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ADMIN</title>
    <link rel="stylesheet" href="./css/admin/base.css">
    <link rel="stylesheet" href="./css/admin/app.css">
</head>

<body>

    <div class="app-page">
        <div class="app-page-header">
            <div class="app-breadcrumb">
                <a>通用模块</a>
                <a>列表</a>
            </div>
            <div class="page-title">
                <div class="title">列表</div>
                <div class="btn-group">
                    <button class="z-btn z-primary" data-popup-open=".popup-add">新增</button>
                </div>
            </div>
        </div>

        <div class="app-page-content">
            <div class="app-card">
                <div class="app-card-body">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-item">
                            <div class="form-item">
                                <select name="select">
                            <option value="">选项一</option>
                            <option value="">选项二</option>
                        </select>
                            </div>
                        </div>
                        <div class="filter-item">
                            <div class="form-item">
                                <input type="text" placeholder="请输入查询关键字" name="keyword">
                            </div>

                        </div>

                        <!-- 选项切换 -->
                        <div class="j-option-switch filter-item">
                            <div class="option form-item">
                                <select name="searchType" class="select" data-content-selector=".search">
                            <option value="default">全部</option>
                            <option value="merchCode">机器编码</option>
                            <option value="ip">IP地址</option>
                            <option value="mac">mac地址</option>
                            <option value="onlineStatus">在线状态</option>
                        </select>
                            </div>
                            <div class="content z-mal">

                            </div>
                        </div>

                        <button class="z-btn z-primary">查询</button>
                    </form>

                    <!-- 关联的选项 -->
                    <div class="search z-hide">
                        <div>
                            <div class="form-item">
                                <input type="text" placeholder="请输入查询关键字" name="keyword2">
                            </div>
                        </div>
                        <div>
                            <div class="form-item">
                                <input type="text" placeholder="请输入查询机器编码" name="merchCode">
                            </div>
                        </div>
                        <div>
                            <div class="form-item">
                                <input type="text" placeholder="请输入查询IP地址" name="ip">
                            </div>
                        </div>
                        <div>
                            <div class="form-item">
                                <input type="text" placeholder="请输入查询MAC地址" name="mac">
                            </div>
                        </div>
                        <div>
                            <div class="form-item">
                                <select name="onlineStatus">
                        <option value="">所有</option>
                        <option value="0">在线</option>
                        <option value="1">离线</option>
                    </select>
                            </div>
                        </div>
                    </div>
                    <!-- 关联的选项 End -->

                    <table class="z-table">
                        <thead>
                            <th></th>
                            <th>
                                <input type="checkbox" class="j-checkbox-all">
                            </th>
                            <th>#</th>
                            <th>文件名</th>
                            <th>版本号</th>
                            <th>发布</th>
                            <th class="z-center">校验状态</th>
                            <th class="z-center">下载状态</th>
                            <th>终端数量</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="9 " class="z-center">暂无数据</td>
                            </tr>
                            <tr>
                                <td class="btn-expand z-center">
                                    <i class="fa fa-angle-right"></i>
                                </td>
                                <td>
                                    <input type="checkbox" class="j-checkbox">
                                </td>
                                <td>1868</td>
                                <td>15001_广州_20180303.json</td>
                                <td>CCAB0B34D27DBA87EB49F688AF0AF03E</td>
                                <td>当前发布</td>
                                <td class="z-center" style="color: #18da18;">
                                    <i class="fa fa-check"></i>
                                </td>
                                <td class="z-center" style="color: #18da18;">
                                    <i class="fa fa-check"></i>
                                </td>
                                <td>10</td>
                                <td class="btn-group">
                                    <a href="./detail.html " class="layer-open " data-title="详情">详情</a>
                                </td>
                            </tr>
                            <tr class="expand-info">
                                <td></td>
                                <td colspan="8">
                                    <li>发布时间：2018-03-07 15:09:16</li>
                                </td>
                            </tr>

                            <tr>
                                <td class="btn-expand z-center">
                                    <i class="fa fa-angle-right"></i>
                                </td>
                                <td>
                                    <input type="checkbox" class="j-checkbox">
                                </td>
                                <td>1868</td>
                                <td>15001_广州_20180303.json</td>
                                <td>CCAB0B34D27DBA87EB49F688AF0AF03E</td>
                                <td>当前发布</td>
                                <td class="z-center" style="color: #18da18;">
                                    <i class="fa fa-check"></i>
                                </td>
                                <td class="z-center" style="color: #18da18;">
                                    <i class="fa fa-check"></i>
                                </td>
                                <td>10</td>
                                <td class="btn-group">
                                    <a href="./detail.html " class="layer-open " data-title="详情">详情</a>
                                </td>
                            </tr>
                            <tr class="expand-info">
                                <td></td>
                                <td colspan="8">
                                    <li>发布时间：2018-03-07 15:09:16</li>
                                </td>
                            </tr>

                            <tr>
                                <td class="btn-expand z-center">
                                    <i class="fa fa-angle-right"></i>
                                </td>
                                <td>
                                    <input type="checkbox" class="j-checkbox">
                                </td>
                                <td>1868</td>
                                <td>15001_广州_20180303.json</td>
                                <td>CCAB0B34D27DBA87EB49F688AF0AF03E</td>
                                <td>历史发布</td>
                                <td class="z-center" style="color: #gray;">
                                    <i class="fa fa-close"></i>
                                </td>
                                <td class="z-center" style="color: #gray;">
                                    <i class="fa fa-close"></i>
                                </td>
                                <td>9</td>
                                <td class="btn-group">
                                    <a href="./detail.html " class="layer-open" data-title="详情">详情</a>
                                </td>
                            </tr>
                            <tr class="expand-info">
                                <td></td>
                                <td colspan="8">
                                    <li>发布时间：2018-03-07 15:09:16</li>
                                </td>
                            </tr>

                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="z-page z-pat z-fr">
                        <span class="active">1</span>
                        <a href="#">2</a>
                        <a href="#">3</a>
                        <a href="#" class="last">尾页</a>
                        <a href="#" class="next">下一页</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script src="lib/jquery.min.js"></script>
    <script src="lib/layer-v3.1.1/layer/layer.js"></script>
    <script src="js/form.js"></script>
    <script src="js/admin/app.js"></script>
    <script>
        // 加载select联动内容
        $('[name="searchType"] option').each(function(index, element) {
            if (App.query.searchType == $(this).val()) {
                $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
            }
        })

        // 从URL加载搜索数据
        $(".filter").formLoad(App.query);

        // 分页链接追加url参数(后台渲染参数可以忽略)
        $(".z-page a").each(function() {
            $(this).attr("href", $(this).attr("href") + location.search)
        });

        // 获取表格中选择的ID
        function getSelecteId() {
            let temp = [];
            $('tbody [type="checkbox"]').each(function(index, element) {
                if (element.checked == true) {
                    temp.push($(this).parents('tr,.tr').data('id'));
                }
            })

            return temp.join(',');
        }
    </script>
</body>

</html>